<template>
  <ITabGroup>
    <ITabList fill>
      <ITab :title="$t('users::user.user')" />

      <ITab :title="$t('auth.password')" />

      <ITab :title="$t('users::user.localization')" />

      <ITab :title="$t('core::notifications.notifications')" />

      <ITab :title="$t('core::app.advanced')" />
    </ITabList>

    <ITabPanels>
      <ITabPanel>
        <IFormGroup :label="$t('users::user.name')" label-for="name" required>
          <IFormInput
            id="name"
            ref="name"
            :model-value="name"
            type="text"
            autocomplete="off"
            @update:model-value="$emit('update:name', $event)"
          >
          </IFormInput>

          <IFormError :error="form.getError('name')" />
        </IFormGroup>

        <IFormGroup :label="$t('users::user.email')" label-for="email" required>
          <IFormInput
            id="email"
            :model-value="email"
            name="email"
            type="email"
            autocomplete="off"
            @update:model-value="$emit('update:email', $event)"
          >
          </IFormInput>

          <IFormError :error="form.getError('email')" />
        </IFormGroup>

        <IFormGroup :label="$t('core::role.roles')" label-for="roles">
          <ICustomSelect
            :model-value="roles"
            input-id="roles"
            :placeholder="$t('users::user.roles')"
            :options="rolesNames"
            :multiple="true"
            @update:model-value="$emit('update:roles', $event)"
          />
        </IFormGroup>
      </ITabPanel>

      <ITabPanel>
        <IFormGroup
          :label="$t('auth.password')"
          label-for="password"
          :required="!inEditMode"
        >
          <IFormInput
            id="password"
            :model-value="password"
            name="password"
            type="password"
            autocomplete="new-password"
            @update:model-value="$emit('update:password', $event)"
          >
          </IFormInput>

          <IFormError :error="form.getError('password')" />
        </IFormGroup>

        <IFormGroup
          :label="$t('auth.confirm_password')"
          label-for="password_confirmation"
          :required="!inEditMode || Boolean(password)"
        >
          <IFormInput
            id="password_confirmation"
            :model-value="passwordConfirmation"
            name="password_confirmation"
            autocomplete="new-password"
            type="password"
            @update:model-value="$emit('update:passwordConfirmation', $event)"
          >
          </IFormInput>

          <IFormError :error="form.getError('password_confirmation')" />
        </IFormGroup>

        <PasswordGenerator />
      </ITabPanel>

      <ITabPanel>
        <LocalizationFields
          :form="form"
          :time-format="timeFormat"
          :date-format="dateFormat"
          :locale="locale"
          :timezone="timezone"
          @update:time-format="$emit('update:timeFormat', $event)"
          @update:date-format="$emit('update:dateFormat', $event)"
          @update:locale="$emit('update:locale', $event)"
          @update:timezone="$emit('update:timezone', $event)"
        />
      </ITabPanel>
    </ITabPanels>

    <ITabPanel>
      <NotificationSettings
        :model-value="notificationsSettings"
        class="overflow-hidden rounded-md border-x border-b border-neutral-200 dark:border-neutral-800"
        @update:model-value="$emit('update:notificationsSettings', $event)"
      />
    </ITabPanel>

    <ITabPanel>
      <div
        :class="[
          'flex items-center rounded-md border-2 px-5 py-4 shadow-sm',
          form.super_admin
            ? 'border-primary-400'
            : 'border-neutral-200 dark:border-neutral-400',
        ]"
      >
        <div class="grow">
          <p
            v-t="'users::user.super_admin'"
            class="text-sm text-neutral-900 dark:text-neutral-200"
          />

          <small
            v-t="'users::user.as_super_admin_info'"
            class="text-neutral-700 dark:text-neutral-400"
          />
        </div>

        <div class="ms-3">
          <IFormToggle
            :model-value="superAdmin"
            :disabled="currentUserIsSuperAdmin"
            @update:model-value="$emit('update:superAdmin', $event)"
            @change="handleSuperAdminChange"
          />
        </div>
      </div>

      <div
        :class="[
          'mt-3 flex items-center rounded-md border-2 px-5 py-4 shadow-sm',
          form.access_api
            ? 'border-primary-400'
            : 'border-neutral-200 dark:border-neutral-400',
        ]"
      >
        <div class="grow">
          <p
            v-t="'users::user.enable_api'"
            class="text-sm text-neutral-900 dark:text-neutral-200"
          />

          <small
            v-t="'users::user.allow_api_info'"
            class="text-neutral-700 dark:text-neutral-400"
          />
        </div>

        <div class="ms-3">
          <IFormToggle
            :model-value="accessApi"
            :disabled="currentUserIsSuperAdmin || form.super_admin"
            @update:model-value="$emit('update:accessApi', $event)"
          />
        </div>
      </div>
    </ITabPanel>
  </ITabGroup>
</template>

<script setup>
import { computed } from 'vue'

import LocalizationFields from '@/Core/components/LocalizationFields.vue'
import PasswordGenerator from '@/Core/components/PasswordGenerator.vue'
import { useApp } from '@/Core/composables/useApp'
import { useRoles } from '@/Core/composables/useRoles'

import NotificationSettings from '../components/UserNotificationSettings.vue'

const props = defineProps({
  inEditMode: Boolean,
  form: { required: true, type: Object },
  name: { required: true, type: String },
  email: { required: true, type: String },
  roles: { required: true, type: Array },
  password: { required: true, type: String },
  passwordConfirmation: { required: true, type: String },
  timezone: { required: true, type: String },
  locale: { required: true, type: String },
  dateFormat: { required: true, type: String },
  timeFormat: { required: true, type: String },
  notificationsSettings: { required: true, type: Object },
  superAdmin: { required: true, type: Boolean },
  accessApi: { required: true, type: Boolean },
})

const emit = defineEmits([
  'update:name',
  'update:email',
  'update:roles',
  'update:password',
  'update:passwordConfirmation',
  'update:timezone',
  'update:locale',
  'update:dateFormat',
  'update:timeFormat',
  'update:notificationsSettings',
  'update:superAdmin',
  'update:accessApi',
])

const { currentUser } = useApp()
const { rolesNames } = useRoles()

/**
 * Check whether the current logged in user is super admin
 * Checks the actual id, as if the user can access this component,
 * means that is admin as this component is intended only for admins
 */
const currentUserIsSuperAdmin = computed(
  () => currentUser.value.id === props.form.id
)

function handleSuperAdminChange(val) {
  if (val) {
    emit('update:accessApi', true)
  }
}
</script>
